/*css reset*/
*{box-sizing: border-box;margin: 0;padding: 0;}
*:before,*:after{box-sizing: border-box;}
ul,ol{list-style: none;}
a{
    color:inherit;text-decoration: none;
}
img{
    max-width: 100%;
    max-height: 100%;
}
/*style*/

@media (min-width:500px){
    body{
        background: #eee;
        
    }
    .globalHeader{
        max-width: 400px;
        margin-left: auto;
        margin-right:auto;
        margin-top: 70px;
        margin-bottom: 60px;

    }
    .searchForm{
        display: flex;
        justify-content:space-between;
    }
    .searchForm > input{
        width: 100%;
        margin-right:10px;
        height: 40px;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .searchForm > button{
        white-space: nowrap;
        padding: 0 15px;
        border: none;
        border-radius: 4px;
        background: #148CB1;
        color: #EEEEEE;
        font-size: 18px;        
    }
    .globalMain{
        max-width: 900px;
        margin-left:auto;
        margin-right:auto;
    }
    
    .siteList {
        display: flex;
        flex-wrap: wrap;
        margin-right: -25px;
        
    }
    .siteList > li{
        margin-bottom:25px;
        margin-right: 25px;
        cursor: pointer;
    }
    
    .siteList .site {
        border: 1px solid #ddd;
        width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #fff;
        border-radius: 4px;
        padding: 20px 0;
        position: relative;
    }
    .siteList .site >.log {
        
        width: 64px;
        height:64px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        
    }
    .siteList .site >.link {
        margin-top:4px ;
        
        font-size: 14px;
    }
    .siteList .addButton{
        width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
        flex-direction: column;
        padding: 20px 0;
        background: white;
        border-radius: 4px;
        
        
    }
    .siteList .addButton .iconWrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64px;
        height: 64px;
        
    }
    .siteList .addButton .icon{
        width: 56px;
        height: 56px;
        border: 2px solid #4F4D4D;
        border-radius: 50%;
    }
    .siteList .addButton .text{
        margin-top:4px;
        font-size: 14px;
    }
    .site .close{
        position: absolute;
        display: flex;
        justify-content: center;
        right:0px;
        top:0px;
        font-size: 23px;
        border-radius: 5px;
        color: grey;
        display: none;
        
    }
    .site:hover .close {
       display: block;
        
    }
    
}
@media(max-width:500px){
    body{
        background: #eee;
    }
    .globalHeader{
        margin: 20px;
        }
    .searchForm{
        display: flex;
        justify-content:space-between;
    }
    .searchForm > input{
        width: 100%;
        margin-right:10px;
        height: 40px;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        
    }
    .searchForm > button{
        white-space: nowrap;
        padding: 0 15px;
        border: none;
        border-radius: 4px;
        background: #148CB1;
        color: #EEEEEE;
        font-size: 18px;}
    .globalMain{}
    
    
    .siteList {display: flex;margin: 20px;justify-content: space-between;flex-wrap: wrap;}

    .siteList > li{margin-bottom:5px ;}

    .siteList .site {border: 1px solid #ddd;width: 160px;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;border-radius: 4px;padding: 20px 0;position: relative;}

    .siteList .site >.log {width: 64px;height:64px;display: flex;justify-content: center;align-items: center;font-size: 48px;}
    
    .siteList .site >.link {margin-top:4px ;font-size: 14px;}

    .siteList .addButton{width: 160px;display: flex;justify-content: center;align-items: center;border: 1px solid #ddd;flex-direction: column;padding: 20px 0;background: white;border-radius: 4px;}
    
    .siteList .addButton .iconWrapper{display: flex;justify-content: center;align-items: center;width: 64px;height: 64px; }
    
    .siteList .addButton .icon{width: 56px;height: 56px;border: 2px solid #4F4D4D;border-radius: 50%;}
    
    .siteList .addButton .text{ margin-top:4px;font-size: 14px;}
    
    .site .close{ 
        display: none;
    }
}
